<template>
  <div>
    <common-head :title="basicInfo.name||'详情页'"/>
    <div class="wrap">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in pics" :key="banner.id">
          <img :src="banner.pic" alt="">
        </van-swipe-item>
      </van-swipe>
      {{ basicInfo.name }}
      <div class="content" v-html="content"></div>
    </div>
    <!-- 弹出商品规格 -->
    <van-popup
      position="bottom"
      :style="{ height: '30%' }"
      round
      closeable
      v-model="showSku">
      <div>
        <van-card
          :num="sku.number"
          :price="sku.minPrice"
          :title="sku.name"
          :thumb="sku.pic"
        >
          <template #footer>
            <van-stepper v-model="sku.number"/>
          </template>
        </van-card>
        <van-button type="danger" size="large" round>确定</van-button>
      </div>
    </van-popup>
    <!-- /弹出商品规格 -->
    <!-- 商品行动栏 -->
    <van-goods-action>
      <van-goods-action-icon icon="wap-home-o" text="首页" @click="$router.push('/home')" />
      <van-goods-action-icon :badge="$store.state.cart.number" icon="cart-o" text="购物车" @click="$router.push('/cart')" />
      <van-goods-action-button
        type="danger"
        text="加入购物车"
        @click="showPop"
      />
    </van-goods-action>
    <!-- /商品行动栏 -->
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import { fetchItemDetail } from '@api'
export default {
  name: 'Detail',
  data () {
    return {
      basicInfo: {},
      content: '',
      pics: [],
      showSku: false,
      // 商品规格
      sku: {}
    }
  },
  created () {
    this.fetchDetail()
  },
  methods: {
    showPop () {
      // 点击显示商品规格弹窗
      this.showSku = true
    },
    fetchDetail () {
      // 获取商品详情数据
      fetchItemDetail(this.$route.params.id).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.basicInfo = res.data.data.basicInfo
          this.content = res.data.data.content.replace(/<img/gi, '<img style="display:block;width:100%"')
          this.pics = res.data.data.pics
          this.sku = {
            ...res.data.data.basicInfo,
            number: 1
          }
        }
      })
    }
  },
  components: { CommonHead }
}
</script>

<style lang="scss" scoped>
.wrap{
  padding-top: 46px;
  .my-swipe{
    width: 10rem;
    height: 5rem;
    img{
      width: 100%;
    }
  }
  /* .content{
    /deep/ img{
      display:block;
      width: 100%;
    }
  } */
}
</style>
